<script src="../node_modules/vue/dist/vue.js"></script>

<div id="app">
  <counter></counter>
  <counter></counter>
  <counter></counter>
  <button @click="inc">increment</button>
</div>

<script>
  // create a counter component (that doesn't take any props)
  // all instances of it should share the same count state
  // and a button that increments all counters at the same time

  const Counter = {
    data() {
      return state;
    },
    template: "<div>{{count}}</div>"
  }

  const state = {
    count: 0
  }

  const app = new Vue({
    el: '#app',
    methods: {
      inc() {
        state.count = state.count + 1;
      }
    },
    components: {
      counter: Counter
    }
  })

</script>